<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>《原神》官网-踏入充满冒险的神奇世界</title>
    <link rel="icon" type="image/x-icon" href="image\原神logo.ico" /><!--网页图标-->
    <link rel="stylesheet" href="css\index.css" />
	<link rel="stylesheet" href="css/font-index..css">
	<link rel="stylesheet" href="css/swiper-bundle.min.css">
	<link rel="stylesheet" href="css/city.css">
	<link rel="stylesheet" href="css/footer.css">
	<link rel="stylesheet" href="css/login.css">
	    <!-- Link Swiper's CSS -->
		<link
		rel="stylesheet"
		href="../package/swiper-bundle.min.css"
	  />
  
	  <!-- Demo styles -->
	  <style>
  
		.swiper {
		  position: relative;
		  left: -320px;
		  width: 640px;
		  height: 400px;
		}
		.swiper-slide {
		  text-align: center;
		  font-size: 18px;
		  background: rgba(38, 18, 12, 0.62);
		}
  
		.swiper-slide img {
		  display: block;
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		}
		.swiper-pagination-bullet{
        height: 18px;
        width: 18px;
		background-color: white;

        }
	  </style>
</head>
<body>
    <div class="header">
		<div class="audio-controller" id="audiu_on">
			<img src="image/播放开.png" style="width: 100%;" id="audio_headerimg"/>
			<audio id="bgMusic">
				<source src="audio/原神官网视频 - 1.最终版(Av55055298,P1).mp3" type="audio/mp3">
			</audio>
		</div>
		<div class="audio-controller" id="audio_off" style="display: none;">
			<img src="image/播放关.png" style="width: 100%;" id="audio_headerimg"/>
			<audio id="bgMusic">
				<source src="audio/原神官网视频 - 1.最终版(Av55055298,P1).mp3" type="audio/mp3">
			</audio>
		</div>
		<div class="header__logo--cut">
			<img src="image/原神主页logo.png">
		</div>
		<div class="header__navbar">
			<div class="header_Cloud"></div>
			<div class="header_navitem">
				<a class="header_hover">首&nbsp页</a>
				<a href="new.html">新&nbsp闻</a>
				<a href="characer.html">角&nbsp色</a>
				<a href="world.html">世&nbsp界</a>
				<a href="carteen.html">漫&nbsp画</a>
				<a href="https://twilight-zheng-que.gitee.io/hhh320/">返&nbsp回</a>
			</div>
		</div>
		<button class="header__login">
			<span>登&nbsp录</span>
			<img src="image/登录.png">
		</button>
		<div class="mhy-account-flow mhy-account-flow-dialog ys-theme is-pc" style="display: none;" id="login">
			<div class="mhy-account-flow-dialog-content">
				<div class="mhy-account-flow-login">
					<img src="image/mihuayouLOGo.png" class="logo">
					<img src="image/X.png" class="close-icon">
				</div>
				<div class="mhy-account-flow-tabs tabs-flex">
					<div class="tab-item active">
						<span>验证码登录</span>
					</div>
					<div class="tab-item">
						<span id="mimaloginers">密码登录</span>
					</div>
				</div>
				<form>
					<div class="mhy-account-flow-form-input">
						<div class="input-container">
							<input type="tel" placeholder="手机号注册/登录" id="containerinput" maxlength="11">
						</div>
						<p class="error-text">*手机号不能为空</p>
						<p class="error-text" style="display: none;" id="MobilePhoneFormat">*手机格式错误</p>
					</div>
					<div class="mhy-account-flow-form-input">
						<div class="input-container">
							<div class="mhy-toast" style="display: none;">请输入正确的手机号</div>
							<input type="tel" placeholder="验证码" maxlength="6">
							<div class="input-inner-btn captcha-login-inner-btn" id="VerificationCode">
								获取验证码
							</div>
						</div>
					</div>
					<div></div>
					<div class="mhy-login-button">
						<button type="submit" class="login-btn">登录</button>
					</div>
				</form>
				<div class="register-bar">
					<a href="">登录遇到问题？</a>
					<a href="" class="to-register">立即注册</a>
				</div>
				<p class="login-tip">
					<span>未注册的手机验证后将自动登录。注册/登录即代表<br>您同意并遵守</span>
					<a>《米哈游通行证用户服务协议》</a>
					<a href="">《米<br>哈游通行证用户个人信息及隐私保护政策》</a>
				</p>
			</div>
			<!-- 密码登录 -->
			<div class="mhy-account-flow-dialog-content" id="mimalogin" style="display: none;">
				<div class="mhy-account-flow-login">
					<img src="image/mihuayouLOGo.png" class="logo">
					<img src="image/X.png" class="close-icon" id="x2">
				</div>
				<div class="mhy-account-flow-tabs tabs-flex">
					<div class="tab-item">
						<span id="yzmloginer">验证码登录</span>
					</div>
					<div class="tab-item">
						<span id="mimaloginer">密码登录</span>
					</div>
				</div>
				<form>
					<div class="mhy-account-flow-form-input">
						<div class="input-container">
							<input type="tel" placeholder="手机号/邮箱">
						</div>
					</div>
					<div class="mhy-account-flow-form-input">
						<div class="input-container">
							<input type="tel" placeholder="密码" maxlength="6">
							<div class="input-inner-btn captcha-login-inner-btn">
								
							</div>
						</div>
					</div>
					<div></div>
					<div class="mhy-login-button">
						<button type="submit" class="login-btn">登录</button>
					</div>
				</form>
				<div class="register-bar">
					<a href="">登录遇到问题？</a>
					<a href="" class="to-register">立即注册</a>
				</div>
				<p class="login-tip">
					<span>登录即代表您同意并遵守<br>您同意并遵守</span>
					<a>《米哈游通行证用户服务协议》</a>
					<a href="">《米<br>哈游通行证用户个人信息及隐私保护政策》</a>
				</p>
			</div>
		</div>
    </div>
	<div class="social">
		<ul class="social_wx">
			<button class="social__btn_off">
				<img src="image/箭头.png" class="social__btn_on_img1">
			</button>
			<table width="100" border="1" cellspacing="0" cellpadding="0">
			  <tbody>
			    <tr>
			      <td>&nbsp;</td>
		        </tr>
		      </tbody>
		  </table>
			<button class="social__btn_on" style="display: none;">
				<img src="image/箭头.png" class="social__btn_on_img2">
				<!-- transform: rotate(-180deg); -->
			</button>
			<li class="social_first">
				<p class="wenzi1">关注我们</p>
				<img src="image/微信二维码.png">
				<p class="wenzi2">扫描关注微信</p>
			</li>
			<li class="social__item">
				<p>官方微博</p>
			</li>
			<li class="social__item">
				<p>TapTap</p>
			</li>
			<li class="social__item">
				<p>官方社区</p>
			</li>
		</ul>
	</div>
	
	<div class="bgWrap">
		<div class="poster__concept">
			<img src ="image/character/a4cdf4572b8007cd56d2545eca7a722d_9222907201069931141.jpg" width="100%" height="100%">
		</div>
		<div class="poster__badge">
			<img src="image/12禁.png">
		</div>
		<!-- <div class="poster_videoSjxer"></div> -->
		<div class="poster__video--entry">
			<img src="image/中间播放功能.png">
			<button class="poster_video">
				<div class="poster_videoSjx"></div>
			</button>
		</div>
		<div class="ys-download-pc">
			<div class="ys-download-pc__qr">
					<img src="image/官方二维码.png" class="ys-download-pc__qr">
					<img src="image/二维码中间.jpg" class="ys-download-pc__qr__icon">
			</div>
			<div class="ys-download-pc__group">
				<a href=""><img src="image/ps4.png"></a>
				<a href=""><img src="image/苹果下载.png"></a>
			</div>
			<div class="ys-download__group">
				<a href=""><img src="image/TapTap下载.png"></a>
				<a href=""><img src="image/苹果下载.png"></a>
			</div>
			<div class="ys-download-pc__btn">
				<a href=""><img src="image/pc.png" alt=""></a>
			</div>
		</div>
	</div>
	<section class="new">
		<div class="news__main">
			<img src="image/第二大块.jpg">
			<h3>
				新闻资讯
			</h3>
		</div>
		<div class="new_Boom">
			<!-- Swiper -->
			<div class="swiper mySwiper" >
				<div class="swiper-wrapper">
				  <div class="swiper-slide"><li><a href="javascript:;"><img src="image/轮播1.jpg"></a></li></div>
				  <div class="swiper-slide"><li><a href="javascript:;"><img src="image/轮播2.jpg"></a></li></div>
				  <div class="swiper-slide"><li><a href="javascript:;"><img src="image/轮播3.jpg"></a></li></div>
				  <div class="swiper-slide"><li><a href="javascript:;"><img src="image/轮播4.jpg"></a></li></div>
				</div>
				<div class="swiper-pagination">
				</div>
			  </div>
			  <div class="news__tab__list">
				  <ul class="news__tab__list__ul">
					  <li class="currenters">最新</li>
					  <li>新闻</li>
					  <li>公告</li>
					  <li>活动</li>
				  </ul>
				  <div class="tab_con">
					  <div class="item" style="display: block;">
					<li>
						<a>
							<p class="item_p">《原神》「极鲜！炙脍之夜」网页活动现已开启</p>
							<p class="item_p2">2021/11/01</p>
						</a>
					</li>
						<li>
						<a>
							<p class="item_p">《原神》EP - 幽蝶留芳之处</p>
							<p class="item_p2">2021/11/01</p>
						</a>
					</li>
						<li>
						<a>
							<p class="item_p">《原神》「雾海悬谜境」2.2版本活动速递第二期</p>
							<p class="item_p2">2021/10/31</p>
						</a>
					</li>
					<li>
						<a>
							<p class="item_p">《原神》「神铸赋形」活动祈愿即将开启</p>
							<p class="item_p2">2021/11/31</p>
						</a>
						</li>
					<li>
						<a>
							<p class="item_p">《原神》「赤团开时」活动祈愿即将开启</p>
							<p class="item_p2">2021/11/31</p>
						</a>
					</li>
					  </div>
					  <div class="item" style="display: none;">
						<!-- 新闻 -->
						<li>
							<a>
								<p class="item_p">《原神》EP - 幽蝶留芳之处</p>
								<p class="item_p2">2021/11/01</p>
							</a>
						</li>
							<li>
							<a>
								<p class="item_p">《原神》EP - 幽蝶留芳之处</p>
								<p class="item_p2">2021/11/01</p>
							</a>
						</li>
							<li>
							<a>
								<p class="item_p">《原神》「雾海悬谜境」2.2版本活动速递第二期</p>
								<p class="item_p2">2021/10/31</p>
							</a>
						</li>
						<li>
							<a>
								<p class="item_p">《原神》「神铸赋形」活动祈愿即将开启</p>
								<p class="item_p2">2021/11/31</p>
							</a>
							</li>
						<li>
							<a>
								<p class="item_p">《原神》「赤团开时」活动祈愿即将开启</p>
								<p class="item_p2">2021/11/31</p>
							</a>
						</li>
					</div>
					<div class="item" style="display: none;">
						<!-- 公告 -->
						<li>
							<a>
								<p class="item_p">《原神》祈愿概率公示</p>
								<!-- <p class="item_p2">2021/11/01</p> -->
							</a>
						</li>
							<li>
							<a>
								<p class="item_p">《原神》「韶光抚月，天下人间」2.1版本更新说明</p>
								<p class="item_p2">2021/9/01</p>
							</a>
						</li>
							<li>
							<a>
								<p class="item_p">《原神》「韶光抚月，天下人间」2.1版本更新通知</p>
								<p class="item_p2">2021/10/31</p>
							</a>
						</li>
						<li>
							<a>
								<p class="item_p">《云·原神》限号不删档付费测试即将开启</p>
								<p class="item_p2">2021/8/10</p>
							</a>
							</li>
						<li>
							<a>
								<p class="item_p">《原神》2.0版本「不动鸣神，泡影断灭」更新说明</p>
								<p class="item_p2">2021/7/21</p>
							</a>
						</li>
					</div>
					<div class="item" style="display: none;">
						<!-- 活动 -->
						<li>
							<a>
								<p class="item_p">《原神》EP - 幽蝶留芳之处</p>
								<p class="item_p2">2021/11/01</p>
							</a>
						</li>
							<li>
							<a>
								<p class="item_p">《原神》EP - 幽蝶留芳之处</p>
								<p class="item_p2">2021/11/01</p>
							</a>
						</li>
							<li>
							<a>
								<p class="item_p">《原神》「雾海悬谜境」2.2版本活动速递第二期</p>
								<p class="item_p2">2021/10/31</p>
							</a>
						</li>
						<li>
							<a>
								<p class="item_p">《原神》「神铸赋形」活动祈愿即将开启</p>
								<p class="item_p2">2021/11/31</p>
							</a>
							</li>
						<li>
							<a>
								<p class="item_p">《原神》「赤团开时」活动祈愿即将开启</p>
								<p class="item_p2">2021/11/31</p>
							</a>
						</li>
					</div>
					<div class="item" style="display: none;">
						<!-- 公告 -->
						<li>
							<a>
								<p class="item_p">「岩港奇珍行记」网页活动说明</p>
								<p class="item_p2">2021/11/02</p>
							</a>
						</li>
							<li>
							<a>
								<p class="item_p">《原神》月夕祝颂-万份空月祝福相赠</p>
								<p class="item_p2">2021/10/01</p>
							</a>
						</li>
							<li>
							<a>
								<p class="item_p">“在尘世的相逢”抖音《原神》公测主播招募</p>
								<p class="item_p2">2021/9/28</p>
							</a>
						</li>
						<li>
							<a>
								<p class="item_p">“在尘世的相逢”快手直播《原神》主播招募活动开启</p>
								<p class="item_p2">2021/9/16</p>
							</a>
							</li>
						<li>
							<a>
								<p class="item_p">“在尘世的相逢”斗鱼直播《原神》主播招募活动开启</p>
								<p class="item_p2">2021/9/16</p>
							</a>
						</li>
					</div>
				  </div>
			  </div>
		</div>
		<!-- 地名介绍 -->
		<div class="city">
			<ul>
				<li>
					<div class="city__list-item">
						<a>
							<img src="image/蒙德.jpg" class="city_img">
							<img src="image/宝石.png" class="city_imgs">
							<p>蒙德城</p>
						</a>
						<div class="city__list-char" style="background-image: url(image/西风骑士团琴.png);"></div>
					</div>
				</li>
				<li>
					<div class="city__list-item">
						<a>
							<img src="image/璃月.jpg" class="city_img">
							<img src="image/宝石.png" class="city_imgs">
							<p>璃月城</p>
						</a>
						<div class="city__list-char" style="background-image: url(image/魈.png);"></div>
					</div>
				</li>
				<li>
					<div class="city__list-item">
						<a>
							<img src="image/稻妻.jpg" class="city_img">
							<img src="image/宝石.png" class="city_imgs">
							<p>稻妻城</p>
						</a>
						<div class="city__list-char" style="background-image: url(image/神里.png);"></div>
					</div>
				</li>
				<div class="city__list-item_last">
					<a>
						<img src="image/lastpng.jpg" class="city_img">
						<p>敬请期待</p>
					</a>
				</div>
			</ul>
		</div>
	</section>
<div class="footer">
  <table width="1000" border="1" cellspacing="0" cellpadding="0">
    <tbody>
      <tr> </tr>
    </tbody>
  </table>
  <ul class="footer__socialbar">
    <li class="footer__socialitem"><a> <img src=image/新浪微博1..png alt="" id="socialitemImg1"> </a> </li>
	    <li class="footer__socialitem"><a><img src="image/微信 (2).png" alt=""id="socialitemImg2"></a></li>
	    <li class="footer__socialitem"><a><img src="image/qq.png" alt=""id="socialitemImg3"></a></li>
	    <li class="footer__socialitem">
	      <div class="share__wrap">
	        <p>分享至</p>
	        <ul class="qxtc">
	          <li><img src="image/QQ空间.png"></li>
	          <li><img src="image/qq (2).png"></li>
	          <li><img src="image/微博 (2).png"></li>
	          <li><img src="image/social-tieba.png"></li>
            </ul>
          </div>
	      <a class="share__wrap_Tc"> <img src="image/分享方式.png" alt=""id="socialitemImg4"> </a> </li>
  </ul>
</div>
<div class="fooer">本</div>
	
</body>
 <!-- Swiper JS -->
 <script src="js/swiper-bundle.min.js"></script>

 <!-- Initialize Swiper -->
 <script>
     var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
 </script>
<script src="js/header.js"></script>
<script src="js/index.js"></script>
<script src="js/move.js"></script>
<script src="js/jquery.js"></script>
<script src="js/tab_con.js"></script>
<script src="js/movers.js"></script>
</html>